<script lang="ts" setup name="MemberGrade">
import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue'
import { cloneDeep } from 'lodash-es'
import { ProTableInstance } from '~/library/components/ProTable/interface'
import { Member } from '~/src/api/interface/member'
import { createMemberGradeAPI, deleteMemberGradeAPI, editMemberGradeAPI, getMemberGradeAPI, getMemberGradeIndexAPI } from '~/src/api/member'
import MemberGradeDialog from '../components/MemberGradeDialog.vue'
import { memberGradeColumns } from './info/columns'

const memberGradeDialogRef = ref<InstanceType<typeof MemberGradeDialog>>()
const tableRef = ref<ProTableInstance>()
const initData = reactive<Member.MemberGrade>({
  isDefault: false,
  isOpenUpgrade: false,
  prioritySortId: 1,
  title: '',
  discountType: 0,
  discountValue: 0,
})
const getIndex = async () => {
  const res = await getMemberGradeIndexAPI({})
  initData.prioritySortId = res.data
}
const goDetail = async (title: string, row: Member.MemberGrade) => {
  if (!row.id) await getIndex()
  memberGradeDialogRef.value?.acceptParams({
    title,
    row: cloneDeep(row),
    api: row.id ? editMemberGradeAPI : createMemberGradeAPI,
    getTableList: tableRef.value?.getTableList,
  })
}
const onDeleteRow = () => {
  useDeleteData(deleteMemberGradeAPI, tableRef.value as ProTableInstance)
}
</script>

<template>
  <div class="auto-height-container auto-height-container main-box">
    <pro-table
      ref="tableRef"
      :columns="memberGradeColumns"
      :indent="20"
      :isCard="false"
      :request-api="getMemberGradeAPI"
      row-key="id"
      title="会员等级列表"
    >
      <template #tableHeader>
        <el-button :icon="CirclePlus" type="primary" @click="goDetail('新增', initData)">新增会员等级</el-button>
        <!-- <el-button :icon="Delete">删除</el-button> -->
        <el-button v-auth="'delete'" :icon="Delete" @click="onDeleteRow">删除</el-button>
      </template>
      <template #date="{ row }">
        {{ row.date ? row.date.slice(0, 11) : '' }}
      </template>
      <template #title="{ row }">
        <el-button :icon="EditPen" link type="primary" @click.stop="goDetail('编辑', row)">{{ row.title }}</el-button>
      </template>
    </pro-table>
    <member-grade-dialog ref="memberGradeDialogRef" />
  </div>
</template>

<style lang="scss" scoped></style>
